<template>
    <div class="component-manage-header" :class="[bgColor + '-bg', fontColor ]">
        <div class="avatar-box">
            <img class="image" :src="info.avatar" alt="" mode="aspectFill">
        </div>
        <div class="info-box text-normal">
            <div class="name text-huge font-bold">{{info.nickname}}<span v-if="info.referrer">推荐人：{{info.referrer}}</span></div>
            <div class="identity" v-if="info.employee_identity || identity">{{identity ? identity : info.employee_identity}}</div>
            <div class="job flex-item" v-if="identity !== '返利会员' && info.position">
                <span class="title">职位</span>
                <span>{{info.position}}</span>
            </div>
            <div class="belong flex-item" v-if="showShop && shopList && shopList.length">
                <span class="title">所属商家</span>
                <div v-for="(shop, index) in shopList" :key="index">{{shop.name}}</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ManageHeader',
    props: {
        identity: {
            type: String,
        },
        info: {
            type: Object,
        },
        bgColor: {
            type: String,
            default: 'red',
        },
        showShop: {
            type: Boolean,
            default: true,
        },
    },
    computed: {
        /** 所属店铺列表 */
        shopList() {
            return typeof this.info.shop === 'string' ? [ { id: this.info.shop_id, name: this.info.shop } ] : this.info.shop;
        },
        fontColor() {
            switch (this.bgColor) {
            case 'red':
            case 'blue': return 'white-color';
            case 'black': return 'yellow-color';
            }
        },
        shop() {
            return this.info.shop.map((shop) => shop.name).join('、');
        },
    },
};
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.component-manage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 108px;
    padding: 0 16px;
    .avatar-box {
        width: 60px;
        height: 60px;
        .image {
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }
    }
    .info-box {
        width: 260px;
        .flex-item {
            .title {
                width: 70px;
            }
        }
    }
}
</style>
